<template>
  <div class="user-center">
    <div class="content">
      <div class="info">
        <div class="tool">
          <div class="msg">
            <i class="icon icon-message"></i>
          </div>
          <div class="setting">
            <i class="icon icon-setting"></i>
          </div>
        </div>
        <router-link to="/user-info" class="avatar">
          <img :src="user.avatar" alt="">
        </router-link>
        <div class="name">
          {{user.nickName}}
        </div>
        <div class="other">
          <span>LV: {{user.level}}</span>
          <span>积分：{{user.integeral}}</span>
        </div>
      </div>
      <yd-cell-group class="order-plane" v-my="10">
        <yd-cell-item type="link" href="/order-list" arrow>
          <span class="left-text" slot="left">我的订单</span>
          <span class="right-text" slot="right">全部订单</span>
        </yd-cell-item>
        <ul class="links">
          <li>
            <router-link to="/">
              <i class="icon icon-wait-pay"></i>
              <p>待付款</p>
            </router-link>

          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-wait-send"></i>
              <p>待发货</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-receiving"></i>
              <p>待收货</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-wait-comment"></i>
              <p>待评价</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-refund"></i>
              <p>退款/售后</p>
            </router-link>
          </li>

        </ul>
      </yd-cell-group>
      <yd-cell-group class="collect-plane" v-my="10">
        <yd-cell-item arrow>
          <span class="left-text" slot="left">我的收藏</span>
          <span class="right-text" slot="right">查看全部</span>
        </yd-cell-item>
        <ul class="collect-list">
          <li v-for="(item,index) in collects" :key="index">
            <router-link :to="`/product/${item.id}`">
              <img v-lazy="item.pic" alt="">
              <span>￥{{item.price}}</span>
            </router-link>
          </li>
        </ul>
      </yd-cell-group>

      <yd-cell-group v-my="10">
        <yd-cell-item arrow>
          <span class="left-text" slot="left">优惠劵</span>
          <span class="right-text" slot="right">全部优惠券</span>
        </yd-cell-item>
        <yd-cell-item arrow>
          <span slot="left">未使用优惠券（5）</span>
        </yd-cell-item>
        <yd-cell-item arrow>
          <span slot="left">已过期优惠券（2）</span>
        </yd-cell-item>
      </yd-cell-group>

      <yd-cell-group class="tool-plane" v-my="10">
        <yd-cell-item>
          <span class="left-text" slot="left">必备工具</span>
        </yd-cell-item>
        <ul class="tool-list">
          <li>
            <router-link to="/">
              <i class="icon icon-pos"></i>
              <p>收货地址</p>
            </router-link>

          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-history"></i>
              <p>足迹</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-gray-share"></i>
              <p>我的分享</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-doc"></i>
              <p>发票助手</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-lock"></i>
              <p>账号安全</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-feedback"></i>
              <p>意见反馈</p>
            </router-link>
          </li>
          <li>
            <router-link to="/">
              <i class="icon icon-about"></i>
              <p>关于我们</p>
            </router-link>
          </li>
        </ul>
      </yd-cell-group>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "UserCenter",
  data() {
    return {
      collects: [
        {
          id: 1,
          pic: require("../assets/img/user-center/collect1.jpg"),
          price: 1640
        },
        {
          id: 2,
          pic: require("../assets/img/user-center/collect2.jpg"),
          price: 684
        },
        {
          id: 3,
          pic: require("../assets/img/user-center/collect3.jpg"),
          price: 3760
        },
        {
          id: 4,
          pic: require("../assets/img/user-center/collect4.jpg"),
          price: 369
        }
      ]
    };
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created(){
    console.log(this.user)
  }
};
</script>

